<template>
  <div class="app-container" style="height: 100%">
    <el-table class="elTable" ref="table1Ref" :data="tableData.slice(0, tableData.length - 2)" height="calc(100% - 100px)"
      :cell-style="tablecellStyle" v-loading="loading" element-loading-text="加载中..."
      :header-cell-style="headerStyleEvent">
      <el-table-column label="填报区县占比" align="right" width="300" fixed="left">
        <el-table-column label="填报区县数" width="300">
          <el-table-column label="省" width="150" prop="province" align="center">
          </el-table-column>
          <el-table-column label="区县总个数" width="150" sortable align="center" prop="countyNum">
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="空间数据" align="center">
        <el-table-column label="行政区划" align="center" prop="divisionProportion" sortable>
          <el-table-column prop="divisionNum" align="center"></el-table-column>
          <el-table-column prop="divisionProportion" align="center">
            <template #default="scope">
              {{ scope.row.divisionProportion }}%
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="高程" align="center" sortable prop="heightProportion" :sort-by="['heightProportion']">
          <el-table-column prop="heightNum" align="center"></el-table-column>
          <el-table-column prop="heightProportion" align="center">
            <template #default="scope">
              {{ scope.row.heightProportion }}%
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="坡度" align="center" sortable prop="slopeProportion" :sort-by="['slopeProportion']">
          <el-table-column prop="slopeNum" align="center"></el-table-column>
          <el-table-column prop="slopeProportion" align="center">
            <template #default="scope">
              {{ scope.row.slopeProportion }}%
            </template></el-table-column>
        </el-table-column>
        <el-table-column label="人口建筑物经济公里格网" width="100" prop="gridProportion" align="center" sortable
          :sort-by="['gridProportion']"><el-table-column prop="gridNum" align="center"></el-table-column>
          <el-table-column prop="gridProportion" align="center">
            <template #default="scope">
              {{ scope.row.gridProportion }}%
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="道路" align="center" sortable prop="roadProportion" :sort-by="['roadProportion']">
          <el-table-column prop="roadNum" align="center"></el-table-column>
          <el-table-column prop="roadProportion" align="center">
            <template #default="scope">
              {{ scope.row.roadProportion }}%
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="机场" align="center" sortable prop="airportProportion" :sort-by="['airportProportion']">
          <el-table-column prop="airportNum" align="center"></el-table-column>
          <el-table-column prop="airportProportion" align="center">
            <template #default="scope">
              {{ scope.row.airportProportion }}%
            </template></el-table-column>
        </el-table-column>
        <el-table-column label="水库" align="center" prop="reservoirProportion" sortable :sort-by="['reservoirProportion']">
          <el-table-column prop="reservoirNum" align="center"></el-table-column>
          <el-table-column prop="reservoirProportion" align="center">
            <template #default="scope">
              {{ scope.row.reservoirProportion }}%
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="学校" align="center" prop="schoolProportion" sortable :sort-by="['schoolProportion']">
          <el-table-column prop="schoolNum" align="center"></el-table-column>
          <el-table-column prop="schoolProportion" align="center">
            <template #default="scope">
              {{ scope.row.schoolProportion }}%
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="医院" align="center" prop="hospitalProportion" sortable :sort-by="['hospitalProportion']">
          <el-table-column prop="hospitalNum" align="center"></el-table-column>
          <el-table-column prop="hospitalProportion" align="center">
            <template #default="scope">
              {{ scope.row.hospitalProportion }}%
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="地质灾害" align="center" prop="dzzhProportion" sortable :sort-by="['dzzhProportion']">
          <el-table-column prop="dzzhNum" align="center"></el-table-column>
          <el-table-column prop="dzzhProportion" align="center">
            <template #default="scope">
              {{ scope.row.dzzhProportion }}%
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="活动断层" align="center" prop="hddcProportion" sortable :sort-by="['hddcProportion']">
          <el-table-column prop="hddcNum" align="center"></el-table-column>
          <el-table-column prop="hddcProportion" align="center">
            <template #default="scope">
              {{ scope.row.hddcProportion }}%
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="危化企业" align="center" prop="dangerousProportion" sortable
          :sort-by="['dangerousProportion']">
          <el-table-column prop="dangerousNum" align="center"></el-table-column>
          <el-table-column prop="dangerousProportion" align="center">
            <template #default="scope">
              {{ scope.row.dangerousProportion }}%
            </template></el-table-column>
        </el-table-column>
        <el-table-column label="加油（加气）站" width="100" align="center" prop="gasProportion" sortable
          :sort-by="['gasProportion']">
          <el-table-column prop="gasNum" align="center"></el-table-column>
          <el-table-column prop="gasProportion" align="center">
            <template #default="scope">
              {{ scope.row.gasProportion }}%
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="应急避难场所" align="center" prop="emergencyProportion" sortable
          :sort-by="['emergencyProportion']">
          <el-table-column prop="emergencyNum" align="center"></el-table-column>
          <el-table-column prop="emergencyProportion" align="center">
            <template #default="scope">
              {{ scope.row.emergencyProportion }}%
            </template></el-table-column>
        </el-table-column>
        <el-table-column label="基于遥感的房屋抗震能力初步评估数据" width="120" align="center" prop="rsProportion" sortable
          :sort-by="['rsProportion']">
          <el-table-column prop="rsNum" align="center"></el-table-column>
          <el-table-column prop="rsProportion" align="center">
            <template #default="scope">
              {{ scope.row.rsProportion }}%
            </template>
          </el-table-column>
        </el-table-column>
      </el-table-column>
      <el-table-column label="统计数据" align="center">
        <el-table-column label="历史地震信息" width="100" align="center" prop="informationProportion" sortable
          :sort-by="['informationProportion']">
          <el-table-column prop="informationNum" align="center"></el-table-column>
          <el-table-column prop="informationProportion" align="center">
            <template #default="scope">
              {{ scope.row.informationProportion }}%
            </template></el-table-column>
        </el-table-column>
        <el-table-column label="历史地震灾害信息" width="100" align="center" prop="disasterProportion" sortable
          :sort-by="['disasterProportion']">
          <el-table-column prop="disasterNum" align="center"></el-table-column>
          <el-table-column prop="disasterProportion" align="center">
            <template #default="scope">
              {{ scope.row.disasterProportion }}%
            </template></el-table-column>
        </el-table-column>
        <el-table-column label="历史预评估数据" width="100" align="center" prop="preAppraisalProportion" sortable
          :sort-by="['preAppraisalProportion']">
          <el-table-column prop="preAppraisalNum" align="center"></el-table-column>
          <el-table-column prop="preAppraisalProportion" align="center">
            <template #default="scope">
              {{ scope.row.preAppraisalProportion }}%
            </template></el-table-column></el-table-column>
        <el-table-column label="区县综合概况信息" width="100" align="center" prop="districtInProportion" sortable
          :sort-by="['districtInProportion']">
          <el-table-column prop="districtInNum" align="center"></el-table-column>
          <el-table-column prop="districtInProportion" align="center">
            <template #default="scope">
              {{ scope.row.districtInProportion }}%
            </template></el-table-column></el-table-column>
        <el-table-column label="乡镇综合概况信息" width="100" align="center" prop="townshipInProportion" sortable
          :sort-by="['townshipInProportion']">
          <el-table-column prop="townshipInNum" align="center"></el-table-column>
          <el-table-column prop="townshipInProportion" align="center">
            <template #default="scope">
              {{ scope.row.townshipInProportion }}%
            </template></el-table-column></el-table-column>
        <el-table-column label="区县人口和建筑物概况" width="100" align="center" prop="districtPoProportion" sortable
          :sort-by="['districtPoProportion']">
          <el-table-column prop="districtPoNum" align="center"></el-table-column>
          <el-table-column prop="districtPoProportion" align="center">
            <template #default="scope">
              {{ scope.row.districtPoProportion }}%
            </template></el-table-column></el-table-column>
        <el-table-column label="乡镇人口和建筑物概况" width="100" align="center" prop="townshipPoProportion" sortable
          :sort-by="['townshipPoProportion']">
          <el-table-column prop="townshipPoNum" align="center"></el-table-column>
          <el-table-column prop="townshipPoProportion" align="center">
            <template #default="scope">
              {{ scope.row.townshipPoProportion }}%
            </template></el-table-column></el-table-column>
        <el-table-column label="人口普查数据" width="100" align="center" prop="populationCensusProportion" sortable
          :sort-by="['populationCensusProportion']">
          <el-table-column prop="populationCensusNum" align="center"></el-table-column>
          <el-table-column prop="populationCensusProportion" align="center">
            <template #default="scope">
              {{ scope.row.populationCensusProportion }}%
            </template></el-table-column></el-table-column>
        <el-table-column label="建筑物易损性数据" width="100" align="center" prop="buildingProportion" sortable
          :sort-by="['buildingProportion']">
          <el-table-column prop="buildingNum" align="center"></el-table-column>
          <el-table-column prop="buildingProportion" align="center">
            <template #default="scope">
              {{ scope.row.buildingProportion }}%
            </template></el-table-column></el-table-column>
        <el-table-column label="房屋造价数据" width="100" align="center" prop="houseProportion" sortable
          :sort-by="['houseProportion']">
          <el-table-column prop="houseNum" align="center"></el-table-column>
          <el-table-column prop="houseProportion" align="center">
            <template #default="scope">
              {{ scope.row.houseProportion }}%
            </template></el-table-column></el-table-column>
        <el-table-column label="重大工程基础设施" width="100" align="center" prop="projectProportion" sortable
          :sort-by="['projectProportion']">
          <el-table-column prop="projectNum" align="center"></el-table-column>
          <el-table-column prop="projectProportion" align="center">
            <template #default="scope">
              {{ scope.row.projectProportion }}%
            </template></el-table-column></el-table-column>
        <el-table-column label="GDP数据" width="100" align="center" prop="gdpProportion" sortable
          :sort-by="['gdpProportion']">
          <el-table-column prop="gdpNum" align="center"></el-table-column>
          <el-table-column prop="gdpProportion" align="center">
            <template #default="scope">
              {{ scope.row.gdpProportion }}%
            </template></el-table-column></el-table-column>
        <el-table-column label="应急准备情况" width="100" align="center" prop="contingencyProportion" sortable
          :sort-by="['contingencyProportion']">
          <el-table-column prop="contingencyNum" align="center"></el-table-column>
          <el-table-column prop="contingencyProportion" align="center">
            <template #default="scope">
              {{ scope.row.contingencyProportion }}%
            </template></el-table-column></el-table-column>
      </el-table-column>
      <el-table-column label="现场调查数据" align="center">
        <el-table-column label="建筑物单体数据" width="90" align="center" prop="buildingsUnitProportion" sortable
          :sort-by="['buildingsUnitProportion']">
          <el-table-column prop="buildingsUnitNum" align="center"></el-table-column>
          <el-table-column prop="buildingsUnitProportion" align="center">
            <template #default="scope">
              {{ scope.row.buildingsUnitProportion }}%
            </template></el-table-column>
        </el-table-column>
        <el-table-column label="抽样调查点概况信息" width="90" align="center" prop="surveyPointProportion" sortable
          :sort-by="['surveyPointProportion']">
          <el-table-column prop="surveyPointNum" align="center"></el-table-column>
          <el-table-column prop="surveyPointProportion" align="center">
            <template #default="scope">
              {{ scope.row.surveyPointProportion }}%
            </template></el-table-column></el-table-column>
        <el-table-column label="灾害风险点信息" width="90" align="center" porp="riskPointProportion" sortable
          :sort-by="['riskPointProportion']">
          <el-table-column prop="riskPointNum" align="center"></el-table-column>
          <el-table-column prop="riskPointProportion" align="center">
            <template #default="scope">
              {{ scope.row.riskPointProportion }}%
            </template></el-table-column></el-table-column>
        <el-table-column label="区县致死性差异指标" width="90" align="center" prop="fatalProportion" sortable
          :sort-by="['fatalProportion']">
          <el-table-column prop="fatalNum" align="center"></el-table-column>
          <el-table-column prop="fatalProportion" align="center">
            <template #default="scope">
              {{ scope.row.fatalProportion }}%
            </template></el-table-column></el-table-column>
      </el-table-column>
    </el-table>
    <SummaryTable :data="tableData.slice(tableData.length - 2)" :loading="loading" ref="summaryTable" />
  </div>
</template>
<script setup name="dataVolumeStatistics">
import { getData } from "@/api/dataVolume/dataVolumeStatistics.js";
import SummaryTable from './summaryTable.vue'

const { proxy } = getCurrentInstance()
const tableData = ref([]);
const loading = ref(false)

function getList() {
  loading.value = true
  getData().then((res) => {
    tableData.value = res.data;
    loading.value = false
  }).catch(() => loading.value = false)
}

const headerStyleEvent = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex == 0 && columnIndex == 1) {
    return { background: "#DDEBF7!important", borderColor: "#aaa!important" };
  }
  if (rowIndex == 0 && columnIndex == 2) {
    return { background: "#FCE4D6!important", borderColor: "#aaa!important" };
  }
  if (rowIndex == 0 && columnIndex == 3) {
    return { background: "#E2EFDA!important", borderColor: "#aaa!important" };
  }
  if (rowIndex == 1) {
    if (columnIndex !== 0) {
      row[columnIndex].rowSpan = 2;
    }
  }
  return { borderColor: "#aaa!important" };
};

const tablecellStyle = ({ }) => {
  return { borderColor: "#aaa!important" };
};

onMounted(() => {
  getList();
  setScrollRule();
})

const table1Ref = ref(null)
const summaryTable = ref(null)
const table1Body = computed(() => table1Ref.value.$refs.scrollBarRef.wrap$)
const table2Body = computed(() => proxy.$refs.summaryTable.table2Ref.$refs.scrollBarRef.wrap$)
const setScrollRule = () => {
  table1Body.value.addEventListener(
    "scroll",
    () => { fn1() }
  );
  table2Body.value.addEventListener(
    "scroll",
    () => { fn2() }
  );
}
const fn1 = () => {
  table2Body.value.scrollLeft = table1Body.value.scrollLeft;
  setTimeout(() => {
    table2Body.value.scrollLeft = table1Body.value.scrollLeft;
  }, 120);
}

const fn2 = () => {
  table1Body.value.scrollLeft = table2Body.value.scrollLeft;
  setTimeout(() => {
    table1Body.value.scrollLeft = table2Body.value.scrollLeft;
  }, 120);
}
onBeforeUnmount(() => {
  table1Body.value.removeEventListener("scroll", fn1);
  table2Body.value.removeEventListener("scroll", fn2);
})

</script>
<style lang="scss" scoped>
.tableContainer {
  overflow-x: auto;
}

:deep(.elTable) {
  border: 1px solid #aaa;
  width: 100%;
  border-collapse: collapse;

  .el-table__inner-wrapper {
    height: 100% !important;
  }

  thead.is-group th {
    background: none;
  }

  thead.is-group tr:first-of-type th:first-of-type {
    border-bottom: none;
  }

  thead.is-group tr:first-of-type th:first-of-type:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 0px;
    top: 0;
    left: 0;
    background-color: #aaa;
    opacity: 0.3;
    display: block;
    transform: rotate(-60deg);
    transform-origin: top;
  }

  thead.is-group tr:last-of-type th:first-of-type:before {
    content: "";
    position: absolute;
    width: 0.5px;
    height: 320px;
    bottom: 40px;
    right: -150px;
    background-color: #aaa !important;
    /* opacity: 0.3; */
    display: block;
    transform: rotate(-75.5deg);
    transform-origin: bottom;
  }

  .el-table__header-wrapper th {
    background-color: white !important;
  }

  td.el-table__cell {
    border-right: 1px solid #aaa !important;
    border-bottom: 1px solid #aaa !important;
  }

  &.is-scrolling-middle {
    .el-table-fixed-column--left.is-last-column.el-table__cell {
      border-right: none !important;
    }
  }

  .el-table--scrollable-x .el-table__body-wrapper {
    overflow: auto !important;
  }
}

.sumStyle {
  height: 80px;
  line-height: 80px;
}
</style>
